<html>
<head>
	<title>js_05</title>
	<meta charset="utf-8"/>
	<style>
		#div1{
			width:200px;
			height:200px;
			background:grey;
			margin:100px;
			position:relative;
		}
		#div2{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
			left:20px;
			top:20px;
		}
	</style>
	<script>
		function getClass(elem,name){
			var arr=[];
			var elems=elem.getElementsByTagName("*");
			for(var i=0;i<elems.length;i++){
				if(elems[i].className==name){
					arr.push(elems[i]);
				}
			}
			return arr;
		}
		window.onload=function(){
			var oUl=document.getElementById("ul1");
			/*for(var i=0;i<oUl.childNodes.length;i++){
				if(oUl.childNodes[i].nodeType==1){
					oUl.childNodes[i].style.background="red";
				}
			}*/
			/*for(var i=0;i<oUl.children.length;i++){
				oUl.children[i].style.background="red";
			}*/
			/*oUl.getElementsByTagName("a")[0].onclick=function(){
				this.parentNode.style.display="none";
			}*/
			//alert(document.getElementById("div2").offsetParent);
			var aUl=document.getElementById("ul1");
			var aRes=getClass(aUl,"box");
			for(var i=0;i<aRes.length;i++){
				aRes[i].style.background="red";
			}
		}
	</script>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
	<div>
		<ul id="ul1">
			<li>ccc<a href="javascript:;">隐藏</a></li>
			<li class="box">c1</li>
			<li>c2</li>
			<li class="box">c3</li>
			<li class="box">c4</li>
		</ul>
	</div>
</body>
</html>